<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
	.navbar-header{
		float: left;
	}
	.user{
		float: left;
		padding-top: 15px;
	}
	.btns{
		float: right;
	}
	.list{
		margin-bottom: 30px;
	}
	.list-group{
		margin-bottom:0;
	}
	.control-label{
		font-size: 20px;
	}
	.submit {
		text-align: center;
	}
	.submit .btn-primary{
		width: 40%;
		margin-top: 15px;
	}
	#ximg{
		max-width: 100%;
	}
</style>
</head>
<body>
	<div class="container">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
			    <div class="navbar-header">
			      <a class="navbar-brand" href="#">
			        <img alt="Brand" src="https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a1.png">
			      </a>
			    </div>
			    <div class="user">
					<p>欢迎：<span class="username">xx</span></p>
				</div>
			</div>
		</nav>

		<div class="list">
			
			<h2 class="empty">空空如也~~~</h2>
			
		</div>
		
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Modify Comment</h4>
		      </div>
		      <div class="modal-body">
		         <input id="xtit" type="text" class="form-control" id="inputEmail3"><br/>
		         <textarea id="xcon" class="form-control"></textarea><br/>
		         <div class="ximg">
					<input type="file">
					<div><img id="ximg" src=""></div>
				</div>	
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" id="xsave">Save changes</button>
		      </div>
		    </div>
		  </div>
		</div>
		

		<div class="submit">
			<div class="form-group">
			    <div>
			      <input id="tit" type="text" class="form-control" id="inputEmail3" placeholder="填写标题">
			    </div>
			</div>
			<div class="form-group">
			    <div>
			      <textarea id="con" class="form-control" placeholder="描述内容"></textarea>
			    </div>
			</div>
			<div class="img">
				<input type="file">
				<div><img id="img" src=""></div>
			</div>	
			<input id="sbt" class="btn btn-primary" type="button" value="comment">
		</div>
	</div>
	
	
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/artTemplate.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	var u = location.search.split("=")[1];
	$(".username").text(u);
//渲染评论列表
	var $list = $(".list");
	$.get("/fetchComment", function(data){
		if(!data.code && data.list.length){
			var html = template("commentList", data);
			$list.append(html).children("h2.empty").hide();
		}
	})

//删除
	$list.on("click", ".btn-danger", function(){
		$.post("/deleteComment", {_id: $(this).data("id")}, (data)=>{
			if(!data.code){
				$(this).parents("div.list-group").remove();
				if(!$list.children("div.list-group").length){
					$list.children("h2.empty").show();
				}
			}
		})
	})

//图片上传
	var $imgFile = $(".submit .img input[type=file]");
	$imgFile.change(function(){
		var type = this.files[0].type;
		if(type === "image/png" || type === "image/jpeg"){
			var form = new FormData();//H5的对象
			form.append("upload", this.files[0]);//第一个参数代表封装的这个对象的key，跟后台协商；
			//异步上传图片对象
			$.ajax({
				url: "/upload",
				type: "POST",
				dataType:"json",
				data: form,
				contentType: false, //发送信息到服务器的内容类型 告诉jq不要去设置Content-Type请求头,默认是 application/x-www-form-urlencoded （form类型） 
		        processData: false, //processData 是jq 独有的参数 用于对data参数进行序列化处理，默认值是true，
		                     //所谓序列化 就是比如{ width:1680, height:1050 }参数对象序列化为width=1680&height=1050这样的字符串。
			}).done(function(res){
				if(!res.code){
					$("#img").attr("src", res.img);//显示预览图，到时往数据库存储图片路径时就在这个图片上获取就可以了
				}

			})
		}
	})
//评论提交
	var $tit = $("#tit"), $con = $("#con"), $img = $("#img"), $sbt = $("#sbt");
	$sbt.click(function(){
		var params = {
			title: $tit.val(),
			content: $con.val(),
			img: $img.attr("src"),
			author: u
		};
		if(!params.title || !params.content){
			alert("不能为空！");
			return;
		};
		$.post("/sbtComment", params, function(data){
			if(!data.code){
				if($("h2.empty").is(":visible")){
					$("h2.empty").hide();
				}
				var html = template("commentList", data);
				$list.append(html);
				$tit.val("");
				$con.val("");
				$img.attr("src", "");
			}
		})
	})
//评论修改
	var $xtit = $("#xtit"), $xcon = $("#xcon"), $ximg = $("#ximg"), $xsave = $("#xsave");
	$list.on("click", ".btn-warning", function(){//点击修改弹出模态框同时获取原内容
		$xsave.data("id", $(this).data("id"));//将点击的这条评论的id用自定义属性保存到模态框确认按钮上
		$xtit.val($(this).parent().prev(".col-md-10").children("h4").text());
		$xcon.val($(this).parent().prev(".col-md-10").children("p").text());
		$ximg.attr("src", $(this).parent().prev(".col-md-10").find("img").attr("src"));
	})
	$(".modal-body .ximg input[type=file]").change(function(){//修改图片
		var type = this.files[0].type;
		if(type === "image/png" || type === "image/jpeg"){
			var form = new FormData();//H5的对象
			form.append("upload", this.files[0]);//第一个参数代表封装的这个对象的key，跟后台协商；
			//异步上传图片对象
			$.ajax({
				url: "/upload",
				type: "POST",
				dataType:"json",
				data: form,
				contentType: false, //发送信息到服务器的内容类型 告诉jq不要去设置Content-Type请求头,默认是 application/x-www-form-urlencoded （form类型） 
		        processData: false, //processData 是jq 独有的参数 用于对data参数进行序列化处理，默认值是true，
		                     //所谓序列化 就是比如{ width:1680, height:1050 }参数对象序列化为width=1680&height=1050这样的字符串。
			}).done(function(res){
				if(!res.code){
					$ximg.attr("src", res.img);
				}

			})
		}
	})
	$xsave.click(function(){//保存修改
		var params = {
			title: $xtit.val(),
			content: $xcon.val(),
			img: $ximg.attr("src"),
			_id: $(this).data("id")
		};
		if(!params.title || !params.content){
			alert("不能为空！");
			return;
		};
		$.post("/modifyComment", params, (data)=>{
			if(!data.code){
				var html = template("commentList", data);
				$(".list-group").find("input[data-id="+$(this).data("id")+"]").parents(".list-group").replaceWith(html);
				$('#myModal').modal('hide');//关闭模态框
			}
		});
	})

</script>
<script type="text/html" id="commentList">
	{{each list as v}}
		<div class="list-group">
			 <a href="#" class="list-group-item clearfix">
			  	<div class="col-md-10"">
					<h4 class="list-group-item-heading">{{v.title}}</h4>
			    	<p class="list-group-item-text">{{v.content}}</p>
			    	<div>
						<img src={{v.img}}>
			    	</div>
			  	</div>
			    <div class="btns col-md-2">
					<input class="btn btn-danger" type="button" value="删除" data-id={{v._id}}>
					<input class="btn btn-warning" data-toggle="modal" data-target="#myModal" type="button" value="编辑" data-id={{v._id}}>
				</div>
			 </a>
		</div>
	{{/each}}
</script>
</body>
</html>